html,
body,
div,
ul,
li,
p,
h
span，
a
{
    margin: 0;
    padding:0;
}
ul,ol
{
    list-style: none;
}
a
{
    text-decoration: none;
}
.wrap
{
    width: 100%;
    height: 100vh;
    position: relative;
    /* background: blue;  */
}
/* 左侧导航栏 */
.nav
{
    width:20%;
    height: 100vh;
    display: inline-block;
    background:black;  
    position: fixed; 
}
.nav p
{
    font-size: 15px;
    color: white;
}
.nav h4
{
    color: white;
}
.nav-item1
{
    width: 100%;
    height:20%;
    background: black;
    margin-top: 30px;
    text-align: center;
    padding: 5px 0;
    line-height: 5px;
    border-bottom: 0.5px solid white;
}
.nav ul a li:hover
{
    background: #222222;
    color: white;
}
.nav ul a li 
{
    width: 100%;
    height: 40px;
    line-height: 30px;
    font-size: 15px;
    color: #686868;
    text-align: center;
}
.nav .nav-item2-1{
    width: 100%;
    height:150px;
    overflow-y: scroll;
}
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb{
    background: #666666;
}

.nav-item2,.nav-item3,.nav-item4,.nav-item5
{
    width: 100%;
    height:6%;
    text-align: center;
    background:black;
    padding: 8px 0;
    border-bottom: 0.5px solid white; 
}
.nav-item6
{
    width: 100%;
    height:8%;
    background: black;
    text-align: center;
    padding: 20px 0;
}

.czs-chuangzaoshi
{
    font-size: 50px;
    color: white;
}
.czs-circle
{
    font-size: 20px;
    color: white;
}
.czs-square
{
    font-size: 20px;
    text-align: center;
    color: white;
}
.czs-triangle
{
    font-size: 20px;
    text-align: center;
    color: white;
}
.czs-camber
{
    font-size: 20px;
    text-align: center;
    color: white;
} 

/* 右侧内容 */
.main
{
    width:70%;
    height: 2000px;
    position: absolute;
    background:white;
    margin: 0 25%;
} 
.main-top
{
    height:50px;
    width: 90%;
    background:white;
    border-radius:5px;
    margin: 30px auto;
    box-shadow: 0 0 3px gray;
    display: -webkit-flex; 
    /* display: flex;
    direction: rtl(left-to-right);  */
}
.main-top-a
{
    height: 20px;
    width: 150px;
    margin: 15px 20px;
    float: left;
}

.main-top-a p
{
    padding-top:-10px;
    font-size: 15px;
}
.main-top-a span
{
    padding: 0 10px;
    font-size: 15px;
    position: absolute;
}
.main-top-b
{
    height: 20px;
    width: 500px;
    margin: 15px 20px;
    float: left;
}
.main-top-up
{
    height:20px;
    width: 30px;
    margin-top: 15px;
    margin-left:30px;
    border: gray 1px solid;
    border-right:0
}
.main-top-down
{
    height: 20px;
    width: 30px;
    float: right;
    margin-top: 15px;
    border: gray 1px solid;
}
.czs-angle-up-l
{
    font-size: 20px;
    color: gray;
    padding: 5px;
}
.czs-angle-down-l
{
    font-size: 20px;
    color: gray;
    padding: 5px;
}
.main-select
{
    height:25px;
    width: 110px;
    border-radius:3px;
    border: 0.5px gray solid;
    float:right;
    margin-right: 50px;
}
.czs-bookmark-l,.czs-wrench-l
{
    font-size:15px;
    color: gray;
}

.main-select ul
{
    border-radius:5px;
}
.main-select li
{
    float: left;
}
.select1
{
    width: 40px;
    height: 25px;
    font-size: 18px;
    text-align: center;
    background: black;
    padding: 0 5px; 
}
.select2
{
    width: 40px;
    height: 25px;
    font-size: 18px;
    text-align: center;
    background:white;
    padding: 0 5px; 
}
/* 热门推荐 */
.middle-remen
{
    width:90%;
    height: 450px;
    border-radius: 5px;
    background: gray;
    margin-top: 70px;
    margin-left: 5%;
}

.middle-remen-1
{
    width:100px;
    height: 30px;
    border-radius: 5px;
    margin-left:20px;
    background: white;
}
.middle-remen-1 p
{
    font-size: 15px;
    color: black;
    text-align: center;
    padding: 5px 0;
}

.remen-box1-1,.remen-box1-2,.remen-box1-3,.remen-box1-4,
.remen-box2-1,.remen-box2-2,.remen-box2-3,.remen-box2-4,
.remen-box3-1,.remen-box3-2,.remen-box3-3,.remen-box3-4
{
    width:22%;
    height: 100px;
    display: inline-block; 
    background: white;
    margin-top:20px;
    margin-left:15px;
} 
.remen-box1-1 p,.remen-box1-2 p,.remen-box1-3 p,.remen-box1-4 p,
.remen-box2-1 p,.remen-box2-2 p,.remen-box2-3 p,.remen-box2-4 p,
.remen-box3-1 p,.remen-box3-2 p,.remen-box3-3 p,.remen-box3-4 p
{
    font-size: 13px;
    color: black;
    line-height: 8px;
    padding: 10px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
 .remen-box1-1 span,.remen-box1-2 span,.remen-box1-3 span,.remen-box1-4 span,
.remen-box2-1 span,.remen-box2-2 span,.remen-box2-3 span,.remen-box2-4 span,
.remen-box3-1 span,.remen-box3-2 span,.remen-box3-3 span,.remen-box3-4 span
{
   position: absolute;
   padding: 10px 10px;
} 
.middle-lingan
{
    width:90%;
    height: 450px;
    border-radius: 5px;
    background: gray;
    margin-top: 30px;
    margin-left: 5%;
}
.middle-jiemian
{
    width:90%;
    height: 800px;
    border-radius: 5px;
    background: gray;
    margin-top: 30px;
    margin-left: 5%;
}